<template>
    <div v-if="user.isLogin" class="common-layout">
        <el-container>
            <!--左侧-->
            <el-aside width="70px">
                <div class="aside">
                    <el-tooltip
                            class="box-item"
                            effect="dark"
                            content="Bottom Center prompts info"
                            placement="bottom"
                    >
                    <div @click="exit">
                        <img src="../../assets/MyWork/tx.jpg" alt="">
                    </div>
                    </el-tooltip>
                    <div :class="[asideChoose?'':'is-aside-choose']"
                         @click="clickAsideChoose(0,'Courses')">
                        <el-icon size="24">
                            <Collection/>
                        </el-icon>
                        课程班级
                    </div>
                    <div v-if="user.info.isTeacher" :class="[asideChoose?'is-aside-choose':'']"
                         @click="clickAsideChoose(1,'Cloud')">
                        <el-icon size="24">
                            <Box/>
                        </el-icon>
                        资源库
                    </div>
                </div>
            </el-aside>

            <!--右侧-->
            <router-view/>

        </el-container>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { usePageStore } from "@/stores/page/page";
import { useAllStore } from "@/stores/all";
import { useUserStore } from "@/stores/user/user";
import router from "@/router";
import { ElMessage } from "element-plus";

const user = useUserStore()
const page = usePageStore()
const all = useAllStore()


// 侧边栏选择
let asideChoose = ref(0)

function clickAsideChoose(num,urlName){
    asideChoose.value = num
    router.push({
        name:urlName,
    })
}
// 退出
function exit(){
    localStorage.removeItem("token")
    user.setInfo("remove","")
    router.push({
        name:"Login"
    })
}
// 提示
ElMessage({
    message: 'oh! 你现在进来了噢',
    type: 'success',
})
</script>

<style scoped lang="less">
.common-layout {
    height: 100vh;

    .el-container {
        height: 100vh;

        .aside {
            display: flex;
            flex-direction: column;
            width: 70px;
            height: 100vh;
            font-size: 12px;
            letter-spacing: 2px;
            color: white;
            background-color: #31364d;



            > div {
                display: flex;
                flex-direction: column;
                justify-content: space-around;
                align-items: center;
                width: 70px;
                height: 70px;
                transition: 0.3s;
                &:hover {
                    cursor: pointer;
                }
            }

            > div:nth-child(1) {
                margin-bottom: 10px;
            }

            img {
                width: 32px;
                height: 32px;
                border-radius: 40px;
            }

            .is-aside-choose {
                background-color: #1c223b;
            }
        }


    }
}

//动画
.fade-leave-to,
.fade-enter-from {
    opacity: 0;
}

.fade-leave-active,
.fade-enter-active {
    transition: 0.2s;
}

.fade-leave-from,
.fade-enter-to {
    opacity: 1;
}
</style>